import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import News from '../News'
import Index from '../Index';
import HouseList from '../HouseList';
import Profile from '../Profile';

import { TabBar } from 'antd-mobile';

import './index.css'

const tabItems = [
  {
    title: '首页',
    icon: 'icon-ind',
    path: '/home'
  },
  {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/houseList'
  },
  {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
  },
  {
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile'
  },
]


export default class Home extends Component {

  state = {
    selectedTab: this.props.location.pathname
  }

  // 渲染tabbar.item
  renderTabBarItem() {
    return tabItems.map(item=> <TabBar.Item
      title={item.title}
      key={item.title}
      icon={<i className={`iconfont ${item.icon}`}/>
      }
      selectedIcon={<i className={`iconfont ${item.icon}`}/>
      }
      selected={this.state.selectedTab === item.path}
 
      onPress={() => {
        this.setState({
          selectedTab: item.path,
        });

        // 路由切换
        this.props.history.push(item.path)
      }}
    >

    </TabBar.Item>)

  }

  render() {
    return (
      <div className='home'>
        {/* 二级路由出口 */}
        <Route path="/home/news" component={News} />
        <Route exact path="/home" component={Index} />
        <Route path="/home/houseList" component={HouseList} />
        <Route path="/home/profile" component={Profile} />

        {/* TabBar */}
        <TabBar
          tintColor="#21b97a"
          barTintColor="white"
          noRenderContent={true}
        >
          {this.renderTabBarItem()}
        </TabBar>
      </div>
    )
  }
}
